<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #root ul {

            list-style: none;
        }

        #root li {
            display: flex;
            justify-content: space-between;
        }
#root h2{
    width: 100%;
margin: 40px;
text-align: center;
}
        #root span {
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        .orange {
            background-color: orange;
        }
    </style>
</head>

<body>

    <div id="root">
        <yu1></yu1>
    </div>
    <template id="yu">
        <ul>
            <li><span v-for="(item, index) in arr1" :key="index" @click="en1(item,v1)"
                    :class="{orange:item.flag}">{{item.name}}</span></li>
            <li>
                <yu-son :vue="v1"></yu-son>
            </li>
            <li><span v-for="(item, index) in arr2" :key="index" @click="en1(item,v2)"
                    :class="{orange:item.flag}">{{item.name}}</span></li>
            <li>
                <yu-son :vue="v2"></yu-son>
            </li>

            <li><span v-for="(item, index) in arr3" :key="index" @click="en1(item,v3)"
                    :class="{orange:item.flag}">{{item.name}}</span></li>
            <li>
                <yu-son :vue="v3"></yu-son>
            </li>

        </ul>
    </template>
    <template id="yuSon">
        <h2>{{vue}}</h2>
    </template>
    <script src="./vue.js"></script>
    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
        const ySon = {
            template: '#yuSon',
            props: ['vue']
        }
        const Yu = {
            template: '#yu',
            components: {
                'yu-son': ySon,
            },
            data() {
                return {
                    arr1: [
                        { id: 1, name: '语文', flag: true, },
                        { id: 2, name: '数学', flag: false, },
                        { id: 3, name: '英语', flag: false, },
                    ],
                    arr2: [
                        { id: 1, name: '地理', flag: true, },
                        { id: 2, name: '历史', flag: false, },
                        { id: 3, name: '政治', flag: false, },
                    ],
                    arr3: [
                        { id: 1, name: '生物', flag: true, },
                        { id: 2, name: '化学', flag: false, },
                        { id: 3, name: '物理', flag: false, },
                        { id: 1, name: '社会', flag: false, },
                        { id: 2, name: '雅思', flag: false, },
                    ],
                    v1: '语文',
                    v2: '地理',
                    v3: '生物',
                    flag: false,
                }
            },
            methods: {
                en1(item, v) {
                    // console.log(item);
                    // console.log(v);
                    // console.log(1, this.v1);
                    // console.log(2, this.v2);
                    // console.log(3, this.v3);
                    if (v == this.v1) {
                        this.arr1.forEach(e => {
                            e.flag = false;
                        });
                        this.v1 = item.name;
                        item.flag = true;
                    }
                    if (v == this.v2) {
                        this.arr2.forEach(e => {
                            e.flag = false;
                        });
                        this.v2 = item.name;
                        item.flag = true;
                    }
                    if (v == this.v3) {
                        this.arr3.forEach(e => {
                            e.flag = false;
                        });
                        this.v3 = item.name;
                        item.flag = true;
                    }
                }
            },
        }

        //创建vue实例
        new Vue({
            el: '#root',
            components: {
                'yu1': Yu,

            }
        })
    </script>
</body>

</html>